<template>
    <div class="rankbody">
        <div class="rankcontainer" v-for="item in ranklist" :key="item.rankid" @click="enterRank(item.rankid)">
            <el-image :src="item.imgurl.replace('/{size}','')" lazy></el-image>
            <div class="content">{{item.rankname}}</div>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'rank',
    data() {
      return {
        ranklist: [],
        ranksongname: []
      }
    },
    created() {
      this.getRankData();
    },
    methods: {
      // 获取排行榜数据
      getRankData() {
        this.$axios.get(this.HOST + '/rank/list&json=true').then(res => {
          this.ranklist = res.data.rank.list;
        })
      },
      enterRank(id) {
        this.$router.push({path: `/rank/${id}`});
      }
    }

  }
</script>

<style scoped>
    .rankbody {
        overflow: auto;
        height: 100vh;
    }

    .rankcontainer {
        display: flex;
        padding: 1rem 1rem;
        border-bottom: 1px solid #555657;
    }

    .el-image {
        height: 7rem;
        width: 7rem;
        border-radius: 20%;
    }

    .content {
        padding-left: 1rem;
        /*行高和排行榜图片保持一致 居中*/
        font-size: 1.5rem;
        line-height: 7rem;
    }

</style>
